<template>
  <div class="app-container">
    <!-- 搜索编码角色名称 -->
    <input-button>
      <template slot="before">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="编码:">
            <el-input v-model="searchForm.code" placeholder="编码" label-width="30px" />
          </el-form-item>
          <el-form-item label="角色名称:">
            <el-input v-model="searchForm.name" placeholder="角色名称" />
          </el-form-item>
          <el-date-picker
            v-model="searchForm.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form>
      </template>
      <template slot="after">
        <el-button type="danger">搜索</el-button>
        <el-button type="info">重置</el-button>
        <el-dropdown class="dropdownBtn" trigger="click">
          <el-button>更多
            <i class="el-icon-arrow-down el-icon--right" />
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="dialogVisible = true">添加</el-dropdown-item>
            <el-dropdown-item divided>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </input-button>
    <!-- 搜索编码角色名称 -->
    <!-- 角色管理内容 -->
    <el-card>
      <el-table
        :data="roleData"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="code"
          label="编码"
          width="180"
        />
        <el-table-column
          prop="name"
          label="角色名称"
          width="80"
        />
        <el-table-column
          prop="describe"
          label="角色描述"
          width="80"
        />
        <el-table-column
          prop="dsType.desc"
          label="数据范围"
          width="120"
        />
        <el-table-column
          prop="readonly"
          :formatter="formatReadonly"
          label="是否内置"
          width="80"
        />
        <el-table-column
          prop="status"
          :formatter="formatStatus"
          label="状态"
          width="80"
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="180"
          sortable=""
        />
        <el-table-column
          label="操作"
        >
          <template #default>
            <el-button type="text" size="small">编辑</el-button>
            <el-dropdown class="dropdownBtn">
              <el-button type="text" size="small">
                更多<i class="el-icon-arrow-down" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>删除</el-dropdown-item>
                <el-dropdown-item>授权</el-dropdown-item>
                <el-dropdown-item>配置</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        align="center"
        layout="prev, pager, next"
        :total="total"
      />
    </el-card>
    <!-- 角色管理内容 -->

    <!-- 新增编辑弹框 -->
    <el-dialog title="新增" :visible="dialogVisible" modal @close="closeDialog">
      <el-form ref="form" :model="searchForm" label-width="100px" class="padding">
        <el-form-item label="编码:">
          <el-input v-model="searchForm.code" />
        </el-form-item>
        <el-form-item label="角色名称:">
          <el-input v-model="searchForm.name" />
        </el-form-item>
        <el-form-item label="状态:">
          <el-radio-group v-model="searchForm.status" style="margin-bottom: 20px;">
            <el-radio-button :label="false">启用</el-radio-button>
            <el-radio-button :label="true">禁用</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="角色描述:">
          <el-input v-model="searchForm.describe" />
        </el-form-item>
        <el-form-item label="状态:">
          <el-radio-group style="margin-bottom: 20px;">
            <el-radio-button :label="false">全部</el-radio-button>
            <el-radio-button :label="true">本级</el-radio-button>
            <el-radio-button :label="false">本级与子级</el-radio-button>
            <el-radio-button :label="false">自定义</el-radio-button>
            <el-radio-button :label="false">个人</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 新增编辑弹框 -->
  </div>
</template>

<script>
import { getRoleAPI } from '@/api/role'
export default {

  data() {
    return {
      searchForm: {
        code: '',
        name: '',
        time: ''
      },
      roleData: [],
      pageConfig: {
        size: 10,
        current: 1
      },
      total: 0,
      dialogVisible: false
    }
  },

  mounted() {
    this.getRoleInfo()
  },

  methods: {
    async  getRoleInfo() {
      const res = await getRoleAPI(this.pageConfig)
      // console.log(res)
      this.total = +res.data.data.total
      this.roleData = res.data.data.records
    },
    formatStatus(row, column, cellValue, index) {
      return cellValue === true ? '启用' : '禁用'
    },
    formatReadonly(row, column, cellValue, index) {
      return cellValue === true ? '是' : '否'
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogVisible = false
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.dropdownBtn{
  margin-left: 10px;
}
.padding{
  padding-right: 50px;
}

</style>
